﻿@using FrogFoot.Resources
@model FrogFoot.Areas.Client.Models.ProfileViewModel
@{
    ViewBag.Title = "Profile";
}

@{
    var savedMessage = TempData["SavedMessage"] as string;
    var selectedEstate = Model.User.Estate != null ? Model.User.Estate.EstateId : -1;
    var selectLocation = Model.User.Location != null ? Model.User.Location.LocationId : -1;

    var ispTabActive = TempData["ShowISPTab"] as bool? == true ? "active" : "";
    var detailsTabActive = ispTabActive != "active" ? "active" : "";
}

<style type="text/css">
    .panel-body label {
        cursor: pointer;
    }

        .panel-body label:hover {
            text-decoration: underline;
        }
</style>

<h2 class="text-center" style="color: green;">Profile</h2>

<p class="text-success">@ViewBag.StatusMessage</p>
<div>
    <dl class="dl-horizontal"></dl>
</div>

@if (!string.IsNullOrEmpty(savedMessage))
{
    <div id="savedMessage" class="form-group">
        <div class="alert alert-success">@savedMessage</div>
    </div>
}

<ul id="lineSpeedTabs" class="nav nav-tabs">
    <li class="@detailsTabActive"><a data-toggle="tab" href="#profile">Profile</a></li>
    <li class="@ispTabActive"><a data-toggle="tab" href="#isps">Manage ISP Contact</a></li>
</ul>

<div class="row form-group">
    @using (Html.BeginForm("UpdateProfile", "Portal", FormMethod.Post, new { id = "profileForm", role = "form" }))
    {
        <div id="productTabs" class="tab-content">
            <div id="profile" class="tab-pane fade in @detailsTabActive">
                <div style="margin-top: 30px;">
                    <div class="col-sm-4">
                        <div id="readonlyDetails">
                            <div class="form-group">
                                <label>Password:</label>
                                <div style="display: inline;">
                                    @Html.ActionLink("Change your password", "ChangePassword")
                                </div>
                            </div>
                            <div class="form-group">
                                <label>First name: </label> @Model.User.FirstName
                            </div>
                            <div class="form-group">
                                <label>Last name: </label> @Model.User.LastName
                            </div>
                            <div class="form-group">
                                <label>Email address: </label> @Model.User.Email
                            </div>
                            <div class="form-group">
                                <label>Cell No: </label> @Model.User.PhoneNumber
                            </div>
                            <div class="form-group">
                                <label>Landline: </label> @Model.User.Landline
                            </div>
                            <div class="form-group">
                                <label>Address: </label> @Model.User.Address
                            </div>
                            <div class="form-group">
                                <label>Suburb: </label> @(Model.User.Location != null ? Model.User.Location.Name : "")
                            </div>
                            <div class="form-group">
                                <label>Receive ISP Communications: </label> @(Model.User.ISPCommsOptOutStatus ? "No" : "Yes")
                            </div>
                            <div class="form-group">
                                <label>Receive Frogfoot Communications: </label> @(Model.User.FFCommsOptOutStatus ? "No" : "Yes")
                            </div>

                            @if (Model.User.Estate != null)
                            {
                                <div class="form-group">
                                    <label>Estate: </label> @Model.User.Estate.Name
                                </div>
                            }

                            <h3>On-site contact</h3>
                            @if (!Model.User.HasAltContact)
                            {
                                <div class="form-group">
                                    <label>None specified</label>
                                </div>
                            }
                            else
                            {
                                <div class="form-group">
                                    <label>First name: </label> @Model.User.AltFirstName
                                </div>
                                <div class="form-group">
                                    <label>Last name: </label> @Model.User.AltLastName
                                </div>
                                <div class="form-group">
                                    <label>Email: </label> @Model.User.AltEmail
                                </div>
                                <div class="form-group">
                                    <label>Cell no. : </label> @Model.User.AltCellNo
                                </div>
                                <div class="form-group">
                                    <label>Landline : </label> @Model.User.AltLandline
                                </div>
                            }

                            <div class="form-group">
                                <input id="updateDetails" type="button" class="btn btn-success" value="Edit Details" />
                            </div>
                        </div>

                        <div id="editDetails" style="display: none;">

                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            @Html.AntiForgeryToken()
                            @Html.HiddenFor(u => u.User.Id)
                            <input id="EstateId" name="User.EstateId" style="display: none;" value="" />


                            <select class="form-control" style="display: none;">
                                <option class="estate default" value="-1">Not in estate</option>

                                @foreach (var estate in Model.Estates)
                {
                                    <option class="estate" data-locationid="@estate.LocationId" data-code="@estate.EstateCode" value="@estate.EstateId">@estate.Name</option>
                                }
                            </select>

                            <div class="form-group">
                                <label for="LocationId" class="control-label">Suburb</label>
                                <select id="LocationId" name="User.LocationId" class="form-control" data-val="true" data-val-required="Please select a suburb.">
                                    <option value="">Select a Suburb</option>
                                    @foreach (var item in Model.Locations)
                                    {
                                        <option value="@item.LocationId" data-code="@item.PrecinctCode" @(item.LocationId == selectLocation ? "selected" : "")>@item.Name</option>
                                    }
                                </select>
                                <span class="field-validation-valid text-danger" data-valmsg-for="LocationId" data-valmsg-replace="true"></span>
                            </div>

                            <div class="form-group">
                                <label for="estatesSelect" class="control-label">Estate</label>
                                <select id="estatesSelect" name="EstateSelect" class="form-control" tabindex="2"></select>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.FirstName, new { @class = "control-label" })
                                @Html.TextBoxFor(m => m.User.FirstName, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.User.FirstName, "", new { @class = "text-danger" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.LastName, new { @class = "control-label" })
                                @Html.TextBoxFor(m => m.User.LastName, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.User.LastName, "", new { @class = "text-danger" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.PhoneNumber, new { @class = "control-label" })
                                @Html.TextBoxFor(m => m.User.PhoneNumber, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.User.PhoneNumber, "", new { @class = "text-danger" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.Landline, new { @class = "control-label" })
                                @Html.TextBoxFor(m => m.User.Landline, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.User.Landline, "", new { @class = "text-danger" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.ISPCommsOptOutStatus, new { @class = "control-label" })
                                @Html.CheckBoxFor(m => m.User.ISPCommsOptOutStatus, new { @class = "checkbox" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(m => m.User.FFCommsOptOutStatus, new { @class = "control-label" })
                                @Html.CheckBoxFor(m => m.User.FFCommsOptOutStatus, new { @class = "checkbox" })
                            </div>

                            <h3>On-site Contact</h3>

                            <div class="form-group row">
                                <div class="col-xs-3">
                                    @Html.CheckBoxFor(m => m.User.HasAltContact, new { @class = "form-control" })
                                </div>
                                <div class="col-xs-9">
                                    Add another person's details who will be the site contact (if it's not you)
                                </div>
                            </div>

                            <div id="altContactContainer" style="display: none;">
                                <div class="form-group">
                                    @Html.LabelFor(m => m.User.AltFirstName, new { @class = "control-label" })
                                    @Html.TextBoxFor(m => m.User.AltFirstName, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.User.AltFirstName, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.User.AltLastName, new { @class = "control-label" })
                                    @Html.TextBoxFor(m => m.User.AltLastName, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.User.AltLastName, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.User.AltEmail, new { @class = "control-label" })
                                    @Html.TextBoxFor(m => m.User.AltEmail, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.User.AltEmail, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.User.AltCellNo, new { @class = "control-label" })
                                    @Html.TextBoxFor(m => m.User.AltCellNo, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.User.AltCellNo, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.User.AltLandline, new { @class = "control-label" })
                                    @Html.TextBoxFor(m => m.User.AltLandline, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.User.AltLandline, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6">
                                    <input id="saveChanges" type="button" value="Save Changes" class="btn btn-success saveChanges" style="margin-bottom: 15px; margin-right: 30px;" />
                                </div>
                                <div class="col-xs-6">
                                    <input id="cancelUpdate" type="button" class="btn btn-default" value="Cancel" style="display: none;" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group" style="margin-top: 10px;">
                            @Html.TextBoxFor(m => m.User.Address, new { @class = "form-control", @style = "display: inline;", @id = "pac-input", @placeholder = "Your address", @readonly = true })
                            <label id="moveMarkerLabel" style="margin-left: 15px; display: inline; display: none;">Move marker to exact location</label>
                            <div style="display: none;">
                                @Html.TextBoxFor(u => u.User.Latitude)
                                @Html.TextBoxFor(u => u.User.Longitude)
                            </div>
                        </div>
                        <div class="form-group">
                            <div id="map-canvas" style="width: 100%; height: 450px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="isps" class="tab-pane fade in @ispTabActive">
                <div class="col-xs-12" style="margin-top: 30px;">
                    <label style="color: green;">Choose which ISPs can contact you regarding their products</label>
                    <div class="panel panel-default form-group">
                        <div class="panel-body" style="padding-left: 30px;">
                            <div class="row">
                                <label class="control-label" style="margin-left: 15px;">
                                    <input id="toggleAll" type="checkbox"/>
                                    Toggle All
                                </label>
                                <br/>  
                                @if (Model.ISPs != null && Model.ISPs.Any())
                                {
                                    for (int index = 0; index < Model.ISPs.Count; index++)
                                    {
                                        //if there is an ISP that matches a ClientISP item then it is allowed (selected)
                                        var isp = Model.ISPs[index];
                                        var clientISP = Model.ClientISPs.FirstOrDefault(i => i.ISPId == isp.ISPId);
                                        bool ispSelected = clientISP != null;

                                        <div class="col-sm-6 col-md-4">
                                            <input type="text" name="User.ClientISPContacts[@index].ISPId" value="@isp.ISPId" style="display: none;"/>
                                            <label>
                                                <input type="checkbox" class="ispCheckbox" name="User.ClientISPContacts[@index].IsISPSelected" value="true" checked="@ispSelected" style="margin-right: 10px;"/>
                                                @isp.Name
                                            </label>
                                        </div>
                                    }
                                }
                                else
                                {
                                    <label>There are no ISPs who have products for your area</label>
                                }
                            </div>
                        </div>
                    </div>

                    <label style="color: green;">Choose how ISPs can contact you</label>
                    <div class="panel panel-default form-group">
                        <div class="panel-body" style="padding-left: 30px;">
                            <div class="row">
                                @for (int index = 0; index < Model.ContactMethods.Count; index++)
                                {
                                    var cm = Model.ContactMethods[index];
                                    var clientCM = Model.ClientContactMethods.FirstOrDefault(x => x.ContactMethodId == cm.ContactMethodId);
                                    bool isSelected = clientCM != null;

                                    <div class="col-sm-4 col-md-3">
                                        <input type="text" name="User.ClientContactMethods[@index].ContactMethodId" value="@cm.ContactMethodId" style="display: none;" />
                                        <label>
                                            <input type="checkbox" name="User.ClientContactMethods[@index].IsSelected" value="true" checked="@isSelected" style="margin-right: 10px;"/>
                                            @cm.Name
                                        </label>
                                    </div>

                                }
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="button" class="btn btn-success saveChanges" value="Save" />
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=@(Globals.GoogleApiKey)&libraries=places"></script>
    <script src="~/Scripts/map/ftth-embed.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //check to see if google map global variable is loaded
            //set marker draggable = false
            var check = true;
            var checkMarkerLoaded = function () {
                if (window.marker != null) {
                    window.marker.draggable = false;
                    check = false;
                } else {
                    if (check)
                        setTimeout(checkMarkerLoaded, 2000);
                }
            }

            checkMarkerLoaded();

            $('#savedMessage').delay(3000).fadeOut('slow');

            $('#updateDetails').on('click', function () {
                $('#readonlyDetails').hide();
                $('#editDetails').show();
                $('#cancelUpdate').show();
                $('#moveMarkerLabel').show();
                $('#pac-input').prop('readonly', false);
                setTimeout(function () {
                    marker.draggable = true;
                }, 10);
            });

            $('#cancelUpdate').on('click', function () {
                $('#readonlyDetails').show();
                $('#editDetails').hide();
                $('#cancelUpdate').hide();
                $('#moveMarkerLabel').hide();
                $('#pac-input').prop('readonly', true);
                setTimeout(function () {
                    marker.draggable = false;
                }, 10);
            });

            $('#User_HasAltContact').click(function () {
                if (this.checked) {
                    $('#altContactContainer').show();
                } else {
                    $('#altContactContainer').hide();
                    $('#altContactContainer').find('input:text').val('');
                }
            });

            $('.saveChanges').click(function () {
                if ($('#User_HasAltContact').is(':checked')) {
                    var altVals = $('#altContactContainer').find('input');
                    for (var i = 0; i < altVals.length; i++) {
                        if (!$(altVals[i]).val()) {
                            alert("Please fill on-site contact fields if on-site contact specified.");
                            return false;
                        }
                    }
                }

                $('#profileForm').submit();
            });

            $('#profileForm').submit(function () {
                if ($('#LocationId').val() == "-1") {
                    $('#LocationId').val('');
                }
            });

            if ($('#User_HasAltContact').is(':checked')) {
                $('#altContactContainer').show();
            }

            $('#LocationId').change(function () {
                var selectedLoc = $('#LocationId').val();
                $('#suburbName').val($('option:selected', this).text());

                if (!selectedLoc) {
                    $("#EstateId").val('');
                    $("#estatesSelect").empty().parent().hide();
                    return;
                }

                var estates = $('option.estate.default, option.estate[data-locationid=' + selectedLoc + ']').clone().removeClass('default');
                $("#estatesSelect").empty().append(estates);

                if (estates.length > 1) {
                    $('#estatesSelect').parent().show();
                    $('#estatesSelect').val(@selectedEstate);
                } else {
                    $('#estatesSelect').parent().hide();
                    $("#EstateId").val('');
                }
            });

            $('#LocationId').change();

            $('#estatesSelect').change(function () {
                $("#EstateId").val($(this).val());
                if ($('#estatesSelect').val() == -1) {
                    $("#EstateId").val('');
                }
            });

            $('#toggleAll').change(function () {
                $('.ispCheckbox').prop('checked', this.checked);
            });
        });
    </script>
}
